<div id="notification">
  <?php if (isset($success)) { ?>
    <?php if ($success == true) { ?>
      <div class="alert alert-success"><?php echo $msg; ?></div>
    <?php } else { ?>
      <div class="alert alert-error"><?php echo $msg; ?></div>
    <?php } ?>
  <?php } ?>
</div>

<div id="mail-form-wrapper">
  <form id="mail-form" class="form-horizontal " enctype="multipart/form-data" action="<?php echo URL; ?>" method="post">
    <input type="hidden" name="page" value="gui_mail" />
    <fieldset>
      <legend>Soạn thư</legend>
      <div class="control-group">
        <label class="control-label" for="to">Người nhận:</label>
        <div class="controls">
          <input name="to" type="text" class="input-xxxlarge" id="to" autocomplete='off' style="margin-bottom: 5px" />
          <p class="help-block"></p>
        </div>
      </div>
      <div class="control-group" id="cc_wrapper" style="display: none;">
        <label class="control-label" for="cc">Cc:</label>
        <div class="controls">
          <input name="cc" type="text" class="input-xxxlarge" id="cc" autocomplete='off' style="margin-bottom: 5px" />
          <p class="help-block"></p>
        </div>
      </div>
      <div class="control-group" id="bcc_wrapper" style="display: none;">
        <label class="control-label" for="bcc">Bcc:</label>
        <div class="controls">
          <input name="bcc" type="text" class="input-xxxlarge" id="bcc" autocomplete='off' style="margin-bottom: 5px" />
          <p class="help-block"></p>
        </div>
      </div>
      <div class="control-group" id="show_wrapper">
        <label class="control-label"></label>
        <a id="show_cc" href="#">Thêm Cc</a>
        <a id="show_bcc" href="#">Thêm Bcc</a>
      </div>
      <div class="control-group">
        <label class="control-label" for="subject">Tiêu đề:</label>
        <div class="controls">
          <input name="subject" type="text" class="input-xxxlarge" id="subject">
          <p class="help-block"></p>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="fileInput">Tệp đính kèm:</label>
        <div class="controls">
          <a id="btn-attach" class="btn" onclick="addAttachedFile();">Thêm tệp</a>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="text_message ckeditor">Nội dung:</label>
        <div class="controls">
          <input type="hidden" name="mail_type" value="text" id="mail_type" />
          <div class="tabbable">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#1" data-toggle="tab" onclick="$('#mail_type')[0].value='text';">Tự viết</a></li>
              <li><a href="#2" data-toggle="tab" onclick="$('#mail_type')[0].value='html';">Mẫu web</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="1">
                <p class="help-block"></p>
                <textarea name="text_message" class="input-xxxlarge" id="text_message" rows="10"></textarea>
              </div>
              <div class="tab-pane" id="2">
                <p class="help-block" id="html_error"></p>
                <ul class="thumbnails" id="web_mail_list">
                  <?php foreach ($web_mails as $web_mail) { ?>
                  <li class="span3">
                    <div class="web_mail_warpper" style="padding: 3px">
                      <div class="thumbnail">
                        <div class="thumbnail_wrapper">
                          <a href="<?php echo $web_mail_url . $web_mail['path']; ?>/index.html" target="_blank">
                            <img src="<?php echo $web_mail_url . $web_mail['path']; ?>/screenshot.png" alt="<?php echo $web_mail['path']; ?>" width="180" height="260" />
                          </a>
                          </div>
                          <div class="caption">
                            <p><input type="radio" name="web_mail_id" value="<?php echo $web_mail['web_mail_id']; ?>" id="web_mail<?php echo $web_mail['web_mail_id']; ?>" />
                              <label style="display: inline; font-weight: bold;" for="web_mail<?php echo $web_mail['web_mail_id']; ?>"><?php echo $web_mail['name']; ?></label></p>
                          </div>
                        </div>
                    </div>
                  </li>
                  <?php } ?>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary" id="btn_send_mail">Gửi đi</button>
        <a href="<?php echo URL; ?>" class="btn">Cancel</a>
      </div>
    </fieldset>
  </form>
</div>
<script src="theme/js/bootstrap-typeahead.js"></script>
<script type="text/javascript">
(function () {
  // CKEditor
  // CKEDITOR.replace('text_message');

  var contact_list = [
    <?php foreach ($contacts as $contact) {
      echo "'" . $contact . "',";

    } ?>
  ];

  // Autocomplete for contact
  $('#to').typeahead( {'source' : contact_list} );
  $('#cc').typeahead( {'source' : contact_list} );
  $('#bcc').typeahead( {'source' : contact_list} );

  //

  /* Validate */
  var $to = $('#to'),
      $cc = $('#cc'),
      $bcc = $('#bcc'),
      $subject = $('#subject'),
      $mail_type = $('#mail_type'),
      $text_message = $('#text_message'),
      $chk_web_mail = $('input[name="web_mail_id"]'),

    tpl_error = '<span class="help-inline">{msg_error}</span>';
    inp_error = false;

  $('#btn_send_mail').on('click', function (evt) {
    inp_error = false;

    // Xóa các thông báo lỗi từ trước
    $('div.control-group').removeClass('error');
    $('.help-block').html('');

    // Kiểm tra người nhận
    if ($to.val() == '' && $cc.val() == '' && $bcc.val() == '') {
      inp_error = true;

      $to.parents('div.control-group').addClass('error');
      $to.next().html( tpl_error.replace('{msg_error}', 'Người nhận bắt buộc phải nhập.') );
      
      $cc.parents('div.control-group').addClass('error');
      $cc.next().html( tpl_error.replace('{msg_error}', 'Người nhận bắt buộc phải nhập.') );
      
      $bcc.parents('div.control-group').addClass('error');
      $bcc.next().html( tpl_error.replace('{msg_error}', 'Người nhận bắt buộc phải nhập.') );

    }

    // Kiểm tra tiêu đề
    if ( !$subject.val() ) {
        inp_error = true;
        $subject.parents('div.control-group').addClass('error');
        $subject.next().html( tpl_error.replace('{msg_error}', 'Tiêu đề bắt buộc phải nhập.') );
    }

    // Kiểm tra nội dung gửi
    // if ( $mail_type.val() == 'text' 
    //     && ( CKEDITOR.instances.text_message.document.getBody().getChild(0) === null
    //         || !$.trim(CKEDITOR.instances.text_message.document.getBody().getChild(0).getText()) ) ) {
      if ( $mail_type.val() == 'text' && $text_message.val() == '' ) {
        inp_error = true;
        $text_message.parents('div.control-group').addClass('error');
        $text_message.prev().html( tpl_error.replace('{msg_error}', 'Nội dung bắt buộc phải nhập.') );
    } else if ( $mail_type.val() == 'html' && !$chk_web_mail.is(':checked') ) {
        inp_error = true;
        $chk_web_mail.parents('div.control-group').addClass('error');
        $('#html_error').html( tpl_error.replace('{msg_error}', 'Bạn phải chọn một một mẫu web.') );
    }

    // Kiểm tra lỗi trước khi gửi
    if (inp_error) {
      evt.preventDefault();
    }
  });
}) ();

</script>
